<template>
  <div
    v-if="isSelf"
    class="feedback-block"
    draggable="true"
    :style="{ top: top + 'px' }"
    v-draggable
  >
    <div v-if="!isIntl">
      <a
        href="https://webchat-bj.clink.cn/chat.html?accessId=60c463ee-1900-407f-b323-1844972981f9&language=zh_CN"
        target="_blank"
      >
        <icon-font type="ic-customer" style="font-size: 18px" />
      </a>
    </div>
    <div v-if="!isIntl"><a href="/help/" target="_blank">帮助文档</a></div>
    <div v-if="isIntl && !isPrivate">
      <a
        href="javascript: void(0);"
        @click="onClickForum"
        :title="$t('feedback.feedback')"
      >
        <icon-font type="ic-woyaofankui" style="font-size: 18px" />
      </a>
    </div>
    <div v-if="isIntl && !isPrivate">
      <a
        href="https://www.ruijienetworks.com/rita"
        target="_blank"
        :title="$t('feedback.rita')"
      >
        <icon-font type="ic-menu-xrg" style="font-size: 18px" />
      </a>
    </div>
    <div v-if="isIntl && !isPrivate">
      <a
        href="https://www.ruijienetworks.com/login/?r=https://www.ruijienetworks.com/pro/csm_login"
        target="_blank"
        :title="$t('feedback.createTicket')"
      >
        <icon-font type="ic-prof-projects" style="font-size: 18px" />
      </a>
    </div>
  </div>
</template>
<script>
import { requestHttp, maccApi } from '@utils/index';
import { mapState } from 'vuex';
export default {
  name: 'feeback',
  data() {
    return {
      isSelf: window === window.top,
      isIntl: process.env.VUE_APP_MACC_ENV == 'INTL',
      isPrivate: process.env.VUE_APP_MACC_CLOUD_ENV === 'private',
      top: 0,
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
  methods: {
    init() {
      this.top = window.innerHeight * 0.8;
    },

    onClickForum() {
      this.getForumTicket();
    },

    async getForumTicket() {
      let { code, msg, data } = await requestHttp({
        api: maccApi.FEEDBACK_TICKET_GET_API,
        method: 'GET',
      });

      if (code === 0) {
        const ticket = data.ticket;
        let communityUrl = `https://www.ruijienetworks.com/api/oauth/authorize.ashx?ticket=${ticket}&url=https%3A%2F%2Fcommunity.ruijienetworks.com%2Fforum.php%3Fmod%3Dpost%26action%3Dnewthread%26fid%3D%26mtype%3Dquestion%26from%3Dcloudweb`;
        window.open(communityUrl);
      } else {
        this.$message.error(msg);
      }
    },
    // handelDragstart(e) {
    //   console.log('拖动开始', e);
    // },
    // handelDragend(e) {
    //   console.log('拖动结束', e);
    //   this.top = e.clientY;
    // },
  },
};
</script>
<style lang="less" scoped>
.feedback-block {
  position: absolute;
  cursor: move;
  z-index: 1001;
  right: 0;
  top: 80%;
  margin-top: -50px;
  width: 40px;
  color: #666;
  .shadow-pop;
  background-color: @table-bg;
  .border-radius;
  & > div {
    padding: 5px;
    a {
      color: @text-primary;
      &:hover {
        color: @theme-hover;
      }
    }
  }
}
</style>
